<template>
  <div id="app">
      <div class="login_container">
        <div class="login_box">
          <div class="img_box">
            <img src="../assets/logo.png" />
          </div>
          <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" class="loginForm">
            <el-form-item prop="username">
              <el-input v-model="loginForm.username"
                    prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>
            <el-form-item prop="userpwd">
              <el-input v-model="loginForm.userpwd"
                        prefix-icon="el-icon-lock"
                        show-password ></el-input>
            </el-form-item>
            <el-form-item class="butns">
              <el-button type="primary" @click="login" >登录</el-button>
              <el-button type="info">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: 'zhangsan',
        userpwd: '123456'
      },
      loginFormRules: {
          username:[
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }
          ],
          userpwd: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 10, message: '密码长度要在6到10之间', trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
     login() {
        // 预验证  如果表单验证通过，则允许发送登录请求。如果验证不通过直接截止代码运行
        this.$refs.loginForm.validate( async valid =>{
          //如果表单验证通过，valid的值会被传递为true,否则为false
          if(!valid)  return this.$message.error('请输入合法的账户名密码');
          let {data: res} = await this.$http.post('/manager/login',this.loginForm)
          console.log(res)
          if(res.meta.status !== 200) return this.$message.error(res.meta.msg);
          this.$message.success(res.meta.msg)
          //把token存到sessionStorage里边
          window.sessionStorage.setItem('token',res.data.token)
          //登陆成功，跳转到主页
          this.$router.push('/home')
        })
    }
  }
}
</script>

<style lang="scss">
.login_container{
  height: 100%;
  background-color: #2b4b6b;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  .img_box{
     height: 130px;
     width: 130px;
     border: 1px solid #eee;
     border-radius: 50%;
     padding: 10px;
     box-shadow: 0 0 10px #ddd;
     position: absolute;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     img {
       width: 100%;
       height: 100%;
       border-radius: 50%;
       background-color: #ddd;
     }
   }
   .loginForm {
      position: absolute;
      bottom: 0px;
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      .butns{
        display: flex;
        justify-content: center;
      }
   }

}


</style>
